<template>
	<view class="pics">
		
		<!-- 左侧滑动区域 -->
		<scroll-view scroll-y="true" class="left" >
			<view @click="choose(item)" :class="activeId==item.maitKey?'active' : ''" 
			 v-for="(item, index) in categoryList" :key="index"
			 >{{item.title}}</view>
		</scroll-view>
		
		<!-- 右侧滑动区域 -->
		<scroll-view scroll-y="true" class="right" >
			<view class="detail-item">
				<view v-for="(item, index) in categoryDetailList" :key="index">
					<image :src="item.image" ></image>
					<text>{{item.title}}</text>
				</view>
				
			</view>
		</scroll-view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				categoryList:[],
				activeId: 0,
				categoryDetailList: [],
				//模拟数据
				imgulr: "https://tse1-mm.cn.bing.net/th/id/OIP-C.g9TAfY_Q7XVC62Ta6OPYMwHaE8?pid=ImgDet&rs=1"
			};
		},
		methods: {
			async getPicsCate() {
				// const res = await this.$db.myquery({
				// 	url: '/api/getimgcategory'
				// })
				// this.categoryList = res.data.message
				// console.log(this.categoryList)
				const res = await this.$db.getCategory({
					url: '/category'
				})
				console.log(res.data.data.category.list)
				this.categoryList = res.data.data.category.list
			},
			choose(item){
				this.activeId = item.maitKey
				this.getCategoryDetail(item.maitKey)
			},
			//预览图片的方法
			previewImg(){
				uni.previewImage({
					// current,
					urls:[this.imgulr,this.imgulr,this.imgulr]
				})
			},
			//获取分类详情的方法
			async getCategoryDetail(maitKey) {
				// const data = await this.$db.getCategoryDetail({
				// 	url: '/subcategory?maitKey=' + maitKey
				// })
				// this.categoryDetailList = data.data.data.list
				const data = await uni.request({
					url: `http://localhost:4000/category?maitkey=${maitKey}`
				})
				console.log(data)
				this.categoryDetailList = data[1].data.data.list
			}
		},
		onReady() {
			this.getPicsCate()
			
		},
		onShow() {
			//进入分类页面获取第一页数据
			this.getCategoryDetail("3627")
			
			this.activeId = "3627"
			
		},
		
		
		
	}
</script>

<style lang="scss">
page {
	height: 100%;
}
.pics {
	display: flex;
	height: 100%;
	width: 100%;
	.right {
		
		width: 550rpx;
		padding:10px;
		text-align: center;
		.detail-item {
			display: flex;
			width: 100%;
			justify-content: space-around;
			flex-wrap: wrap;
			image {
				width: 120rpx;
				height: 120rpx;
				margin: 10px;
			}
			text {
				display: block;
				font-size: 12px;
			}
		}
	}
	
}

.left {
		width: 200rpx;
		height: 100%;
		
		border-right: 1px solid #eee;
		
		view{
			width: 100%;
			height: 60px;
			line-height: 60px;
			font-size: 30rpx;
			text-align: center;
			color: #333;
			border-bottom: 1px solid #eee;
		}
		.active {
			background-color: $shop_color;
			color: #FFF ;
			
		}
	}
	
</style>
